<template>
  <div class="collocate-wrap">
    <div class="collocate-goods">
      <div class="collocate-goods-item" v-for="item in itemList" :key="item.item_id+item.sku_id">
        <div class="collocate-goods-item-left">
          <div class="goods-img">
            <img :src="item.is_compress === 1 ? item.pic_url + '480x480':item.pic_url" alt="">
          </div>
        </div>
        <div class="collocate-goods-item-right">
          <div class="goods-info">
            <div class="goods-info-wrap">
              <div class="title">{{item.title}}</div>
              <div class="props" v-if="item.is_sku" @click="item.isSelectSKu&&checkItemProps(item.item_id)"><span v-if="item.skuNameStr" :style="{'margin-left': `${item.isSelectSKu?'':'0'}`}">{{item.skuNameStr}}</span> <span v-else> 选择属性</span><span v-if="item.isSelectSKu"><img src="https://img.wifenxiao.com/h5-wfx/images/anger_down.png" alt=""></span></div>
              <div class="price" v-html="scaleGoodsPriceFn(item.price, 'nowprice')"></div>
            </div>
            <div class="goods-info-num">x{{formData.addNum * (item.a_num || 1)}}</div>
          </div>
        </div>
      </div>
      <div v-if="share_desc">
        套餐描述：{{ share_desc }}
      </div>
    </div>
    <div class="collocate-package">
      <div class="collocate-package-num">
        <span>数量：</span>
        <div class="count">
          <count-plug v-model="formData.addNum" @changeNum="changeNum"></count-plug>
        </div>
      </div>
      <div class="collocate-package-price">
        <div class="price">
          <div class="price-top"><span>合计：</span><span v-html="scaleGoodsPriceFn(hjMoney, 'package')"></span></div>
          <div class="price-bottom">优惠：&yen;{{yhMoney}}</div>
        </div>
        <div class="btn" @click="nowBuyCollcate">
            <div class="btn-buy red-gra-btn">立即购买</div>
        </div>
      </div>
    </div>
    <!--sku弹层-->
    <sku-dialog activityType="collocate" :visible.sync="skuDialogVisible" :itemId="itemId" @assortSku="getAssortSku"></sku-dialog>
  </div>
</template>

<script>
/*
 * @Author: zhangmeng
 * @Date: 2020-06-06 17:54:37
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-07-02 17:59:03
 */
import Vue from 'vue'
import Store from '@/utils/store'
import { isIOS } from '@/utils/validate'
import skuDialog from '../../components/skuDialog'
import CountPlug from '@/components/CountPlug'
import { scaleGoodsPrice } from '@/utils/index.js'
import { getItemAssort } from '@/api/item/activity.js'
import small from '@/smallapp/small'
import { mpShare} from '@/utils/utils'

export default Vue.extend({
  name: 'index',
  components: {
    skuDialog,
    CountPlug
  },
  data() {
    return {
      skuDialogVisible: false,
      itemId: 0,
      assortId: 0,
      itemList: [],
      assortInfo: {},
      hjMoney: '',
      yhMoney: '0.00',
      formData: {
        addNum: 1
      },
      share_desc: ''
    }
  },
  mounted() {
    const sendData = {}
    sendData.aid = this.$route.query.aid
    sendData.id = this.$route.query.id
    sendData.type = this.$route.query.type
    sendData.supplier = this.$route.query.supplier
    sendData.op_supplier_id = this.$route.query.op_supplier_id
    this.getItemAssortFun(sendData)
  },
  methods: {
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },

    /**
     * 选择单个商品的sku
     */
    checkItemProps(id) {
      this.itemId = Number(id)
      this.skuDialogVisible = true
    },

    /**
     * 修改数量
     */
    changeNum(num, type) {
      this.hjMoney = parseFloat(this.assortInfo.hj * num).toFixed(2)
      this.yhMoney = parseFloat(this.assortInfo.yh * num).toFixed(2)
    },

    /**
     * 立即购买
     */
    nowBuyCollcate() {
      const sendData = {}
      const skus = []
      const itemIds = []
      const itemLists = this.itemList
      for (let i = 0; i < itemLists.length; i++) {
        if (itemLists[i].is_sku) {
          if (Number(itemLists[i].skuId) === 0) {
            const s = i + 1
            this.$Error('请选择第' + s + '个商品属性')
            return false
          }
        }
        skus.push(itemLists[i].skuId)
        itemIds.push(itemLists[i].item_id)
      }
      sendData.sku = skus
      sendData.item_id = itemIds
      sendData.assort_id = this.assortId
      sendData.total_num = this.formData.addNum
      sendData.type = 'onAssort'
      Store.save('orderBuy', sendData)
      if (isIOS()) {
        // TODO 小程序跳转处理
          this.$JumpName(this, 'buy')
      } else {
        this.$JumpName(this, 'buy')
      }
    },

    getAssortSku(val) {
      const itemLists = this.itemList
      this.skuDialogVisible = false
      for (let i = 0; i < itemLists.length; i++) {
        if (itemLists[i].item_id == val.itemId) {
          itemLists[i].skuNameStr = val.skuNameStr
          itemLists[i].skuId = val.skuId
        }
      }
      this.itemList = itemLists
    },

    /**
     * 获取数据
     */
    getItemAssortFun(sendData) {
      getItemAssort(sendData).then(res => {
        if (res.status === 1) {
            wx.setNavigationBarTitle({
              title: res.data.data.title
            })
          this.assortId = res.data.data.assort_id
          const assortInfo = {}
          assortInfo.hj = res.data.data.assort_price
          assortInfo.yh = res.data.data.dis_price
          this.assortInfo = assortInfo
          this.hjMoney = parseFloat(res.data.data.assort_price).toFixed(2)
          this.yhMoney = parseFloat(res.data.data.dis_price).toFixed(2)
          const itemList = res.data.data.item_info
          const currentItem = res.data.data.current
          if (currentItem) itemList.unshift(currentItem)

          for (let i = 0; i < itemList.length; i++) {
            const item = itemList[i]
            item.skuNameStr = item.sku_name || ''
            item.skuId = item.sku_id
            if (item.skuId) {
              item.skuId = item.alias_key
            }
            item.isSelectSKu = !item.skuId
          }
          this.itemList = itemList
          this.share_desc = res.data.data.share_desc
          // TODO 小程序分享
          const sid = small.globalData.shopId
          const pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'
          this.shareInfo = {
            title: res.data.data.title,
            imgUrl: res.data.data.share_logo,
            shareParam: `sid=${sid}&pid=${pid}`
          }
          mpShare(true, true, 'goods/pages/itemCollocateDetail/index', this.shareInfo)
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
})
</script>


<style lang="scss">
  @import "src/styles/mixin";
  @import "src/styles/variables";
  .collocate-wrap{
      width: 100%;
      padding: 20px 25px;
      box-sizing: border-box;
    .collocate-goods{
        padding-bottom: 100px;
      &-item{
        display: flex;
        flex-direction: row;
        padding: 25px;
        border-radius: 20px;
        background-color: #fff;
        margin-bottom: 20px;
        position: relative;
        &:last-child{
          margin-bottom: 0;
        }
        &-left{
          .goods-img{
            width: 160px;
            height: 160px;
            border-radius: 5px;
            overflow: hidden;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
        &-right{
          flex: 1;
          color: #333;
          position: relative;
          margin-left: 14px;
          padding-right: 90px;
          .goods-info{
            display: flex;
            flex-direction: row;
            &-wrap{
              flex: 1;
              .title{
                  height: 55px !important;
                  font-weight: bold;
                  // font-size: 24px;
                  font-family: PingFang SC;
                  @include lineClamp(24px, 1.2, 2);
              }
              .props {
                  display: inline-block;
                  margin: 4px 0;
                  background: #F7F7F7;
                  border-radius: 6px;
                  padding: 15px 20px;
                  color: #4D4D4D;
                  font-size: 24px;
                  font-weight: 500;
                  &>span:last-child {
                      margin-left: 17px;
                      img {
                        width: 17px;
                        height: 10px;
                        vertical-align: 2px;
                      }
                  }
              }
              .price{
                position: absolute;
                bottom: 0;
              }
            }
            &-num{
              width: 90px;
              text-align: right;
              position: absolute;
              top: 50%;
              right: 0;
              transform: translate(0, -50%);
            }
          }
        }
      }
    }
    .collocate-package{
      width: 100%;
      height: 98px;
      box-sizing: border-box;
      position: fixed;
      bottom: 0;
      left: 0;
      background: #fff;
      z-index: 2;
      padding: 0 30px;
      border-top: 1px solid #ddd;
      display: flex;
      flex-direction: row;
      &-num{
        span{
            display: inline-block;
          padding: 36px 0;
          font-size: 28px;
        }
        .count{
          @include alignTop;
          padding: 29px 0;
        }
      }
      &-price{
        flex: 1;
        display: flex;
        flex-direction: row;
        position: relative;
        .price{
          flex: 1;
          padding-left: 50px;
          position: absolute;
          top: 50%;
          left: 0px;
          transform: translate(0, -50%);
          &-top{
            color: $warning;
            font-size: 24px;
            &>span:first-child {
                color: #333;
                font-weight: bold;
                margin-right: 9px;
            }
          }
          &-bottom{
            font-size: 24px;
            margin-top: 10px;
          }
        }
        .btn {
            position: absolute;
            top: 50%;
            right: 0px;
            transform: translate(0, -50%);
            &-buy{
                color: #fff;
                line-height: 24px;
                font-size: 22px;
                font-weight: 500;
                padding: 15px 26px;
                border-radius: 26px;
            }
        }
      }
    }
  }
</style>
